<template>
  <view class="content">
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <!-- 水质3位小数 -->
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view
        style="
          justify-content: center;
          display: flex;
          font-size: 40rpx;
          font-weight: bold;
        "
      >
        {{ array[index] }}
        <image
          src="../static/image/arrow_bottom.png"
          style="width: 28rpx; height: 20rpx; margin-top: 30rpx"
        />
      </view>
    </picker>
    <scroll-view scroll-y style="height: calc(100vh - 60rpx)">
      <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
        <view class="qiun-title-dot-light"
          >流量调节阀开度
          <text style="color: #969799; font-size: 26rpx"
            >（{{ kdtime }})</text
          ></view
        >
      </view>
      <view class="qiun-charts">
        <canvas
          canvas-id="canvasGauge"
          id="canvasGauge"
          class="charts"
          :width="cWidth * pixelRatio"
          :height="cHeight * pixelRatio"
          :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
        ></canvas>
      </view>
      <view style="display: flex; flex-wrap: wrap">
        <view style="width: 50vw">
          <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
            <view class="qiun-title-dot-light">管径（mm）</view>
          </view>
          <view class="value">{{ details.gj }}</view>
        </view>
        <view style="width: 50vw">
          <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
            <view class="qiun-title-dot-light">设计规模（万m³/d）</view>
          </view>
          <view class="value">{{ parseFloat(details.sjgm) }}</view>
        </view>

        <view style="width: 50vw">
          <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
            <view class="qiun-title-dot-light">实时流量（m³/h）</view>
          </view>
          <view
            style="
              color: #969799;
              padding-left: 28rpx;
              font-size: 26rpx;
              line-height: 40rpx;
            "
            >{{ numtime }}</view
          >
          <view class="value" style="line-height: 70rpx">{{ tickOne() }}</view>
        </view>

        <view style="width: 50vw">
          <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
            <view class="qiun-title-dot-light">累计流量（m³）</view>
          </view>
          <view
            style="
              color: #969799;
              padding-left: 28rpx;
              font-size: 26rpx;
              line-height: 40rpx;
            "
            >{{ twotime }}</view
          >
          <view class="value" style="line-height: 70rpx">{{ tickTwo() }}</view>
        </view>
        <view style="width: 50vw">
          <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
            <view class="qiun-title-dot-light">电动阀阀前压力（MPa）</view>
          </view>
          <view
            style="
              color: #969799;
              padding-left: 28rpx;
              font-size: 26rpx;
              line-height: 40rpx;
            "
            >{{ threetime }}</view
          >
          <view class="value" style="line-height: 70rpx">{{
            tickThree()
          }}</view>
        </view>
      </view>

      <view style="height: 100rpx" />
      <!-- <flipcountdown :tick="tickTwo" dataOrNum="0.00" style="margin-left: 16rpx;"></flipcountdown> -->
      <!-- <view class="qiun-charts" >
				<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts" :width="cWidth*pixelRatio" 
				:height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
			</view>
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
										  <view class="qiun-title-dot-light">流量（M/P）</view>
			</view>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts" :width="cWidth*pixelRatio" 
				:height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
			</view> -->
    </scroll-view>
  </view>
</template>
<script>
import API from "@/common/api.js";
import uCharts from "@/components/u-charts/u-charts.js";
import flipcountdown from "@/components/flipcountdown-uni/flipcountdown-uni.vue";
var _self,
  canvaGauge = null;

export default {
  components: {
    flipcountdown,
  },
  data() {
    return {
      timer: null,
      array: [],
      array2: [],
      arrayids: [],
      details: {},
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      index: 0,
      cWidth: "",
      cHeight: "",
      cHeightLine: "",
      pixelRatio: 1,
      gaugeWidth: 15,
      Gauge: {
        categories: [
          {
            value: 0.2,
            color: "#1890ff",
          },
          {
            value: 0.8,
            color: "#2fc25b",
          },
          {
            value: 1,
            color: "#f04864",
          },
        ],
        series: [
          {
            name: "",
            data: 0.1,
          },
        ],
      },
      kdtime: "",
      num: 0,
      numtime: "",
      tickOne: function tick() {
        return (this.propsDataOrNum = _self.num
          ? Number(Math.floor(Number(_self.num) * 100) / 100).toFixed(2)
          : 0);
      },
      two: 0,
      twotime: "",
      tickTwo: function tick() {
        return (this.propsDataOrNum = _self.two
          ? Number(Math.floor(Number(_self.two) * 100) / 100).toFixed(2)
          : 0);
      },
      three: 0,
      threetime: "",
      tickThree: function tick() {
        return (this.propsDataOrNum = _self.three
          ? Number(Math.floor(Number(_self.three) * 1000) / 1000).toFixed(3)
          : 0);
      },
    };
  },
  onLoad() {
    canvaGauge = null;
    _self = this;
    this.cWidth = uni.upx2px(750);
    this.cHeightLine = uni.upx2px(500); // uni.getSystemInfoSync().windowHeight//  uni.upx2px(500);
    this.cHeight = uni.upx2px(500);
    this.selectAsset();
  },
  onUnload() {
    console.log("xxxxxxxxxxxx");
    clearInterval(this.timer);
    uni.closeSocket();
    uni.hideLoading();
  },
  methods: {
    selectAsset() {
      API.selectAsset({
        storehouse_id: 1,
        limit: 5000,
        offset: 0,
        pzhAuthorization: this.pzhAuthorization,
        asset_sblx: "scdd_sblx_002",
      }).then((res) => {
        if (res.resCode == "success") {
          uni.hideLoading();
          res.datas.forEach((item) => {
            this.array.push(
              item.asset_sbmc.substring(
                item.asset_sbmc.indexOf("#") + 1,
                item.asset_sbmc.length
              )
            );
            this.array2.push({
              sjgm: item.sjgm,
              gj: item.gj,
              sbmc: item.asset_sbmc.substring(
                item.asset_sbmc.indexOf("#") + 1,
                item.asset_sbmc.length
              ),
            });
            this.arrayids.push(item.id);
          });
          this.details = {
            gj: this.array2[this.index].gj,
            sjgm: this.array2[this.index].sjgm,
          };
          this.socket();
        }
      });
    },
    socket() {
      uni.connectSocket({
        url:
          "wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization=" +
          this.pzhAuthorization,
      });
      uni.onSocketOpen((res) => {
        console.log("WebSocket连接已打开！");
        uni.sendSocketMessage({
          data: `getSbTargetBySbIdNeedPI(${this.arrayids[this.index]})`,
        });
        this.timer = setInterval(() => {
          uni.sendSocketMessage({
            data: `getSbTargetBySbIdNeedPI(${this.arrayids[this.index]})`,
          });
        }, 5000);
      });
      uni.onSocketMessage((res) => {
        let obj = JSON.parse(res.data);
        if (obj.functionCode == "getSbTargetBySbIdNeedPI") {
          this.num = obj.datas[2].value;
          this.numtime = obj.datas[2].timestamp;
          this.two = obj.datas[3].value;
          this.twotime = obj.datas[3].timestamp;
          this.three = obj.datas[0].value;
          this.threetime = obj.datas[0].timestamp;
          this.kdtime = obj.datas[1].timestamp;
          this.Gauge.series[0].data = parseFloat(obj.datas[1].value) / 100;
          this.getServerData();
        }
      });
    },
    bindPickerChange(e) {
      this.index = e.target.value || 0;
      this.details = {
        gj: this.array2[this.index].gj,
        sjgm: this.array2[this.index].sjgm,
      };
      uni.sendSocketMessage({
        data: `getSbTargetBySbIdNeedPI(${this.arrayids[this.index]})`,
      });
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        uni.sendSocketMessage({
          data: `getSbTargetBySbIdNeedPI(${this.arrayids[this.index]})`,
        });
      }, 5000);
    },
    getServerData() {
      let Gauge = { categories: [], series: [], title: { name: "" } };
      //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
      Gauge.categories = this.Gauge.categories;
      Gauge.series = this.Gauge.series;
      Gauge.title.name =
        Number(
          Math.floor(Number(Gauge.series[0].data * 100) * 100) / 100
        ).toFixed(2) + "%";
      _self.showGauge("canvasGauge", Gauge);
    },
    showGauge(canvasId, chartData) {
      if (canvaGauge) {
        canvaGauge.updateData(chartData);
        return;
      }
      canvaGauge = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "gauge",
        fontSize: 11,
        legend: { show: false },
        title: {
          name:
            Number(
              Math.floor(Number(chartData.series[0].data * 100) * 100) / 100
            ).toFixed(2) + "%",
          color: chartData.categories[1].color,
          fontSize: 25 * _self.pixelRatio,
          offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
        },
        subtitle: {
          name: chartData.series[0].name,
          color: "#666666",
          fontSize: 15 * _self.pixelRatio,
          offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
        },
        extra: {
          gauge: {
            type: "default",
            width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
            startAngle: 0.75,
            endAngle: 0.25,
            startNumber: 0,
            endNumber: 100,
            splitLine: {
              fixRadius: 0,
              splitNumber: 10,
              width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
              color: "#FFFFFF",
              childNumber: 5,
              childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
            },
            pointer: {
              width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
              color: "auto",
            },
          },
        },
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        dataLabel: true,
      });
    },
  },
};
</script>
<style scoped>
/* #ifndef H5 */
.content >>> .xdsoft_flipcountdown > .xdsoft_digit {
  transition-property: background-position;
  transition-duration: 0.5s;
}
/* #endif */
</style>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
body {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
text {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
}

page {
  background: #fff;
}

button {
  width: 100%;
}
/* #endif */
.content {
  height: 100vh;
  .qiun-common-mt {
    margin-top: 10upx;
  }
  .qiun-bg-white {
    background: #ffffff;
  }
  .qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
  }
  .qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 26rpx;
    color: #000000;
  }
  .value {
    padding-left: 20rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    font-weight: bold;
    color: rgba(74, 125, 221, 1);
  }
}
</style>
